<template>
  <div class="channelAdd">
    <el-form :inline="true" :model="channelAdd" class="demo-form-inline">
      <el-form-item label="渠道类别">
        <el-select v-model="channelTypeidName" placeholder="渠道类别" size="small" @change="handleChannelTypeId">
          <el-option v-for="item in channelTypellist" :key="item.id" :label="item.channelName" :value="{value:item.id,label:item.channelName}" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" plain @click="handleAddchannel" icon="el-icon-plus" size="small" style='margin-right: 20px;'>新增</el-button>
        <el-form-item>
          <!-- <el-button type="danger" plain @click="" icon="el-icon-delete" size="small">删除</el-button> -->
        </el-form-item>
      </el-form-item>
    </el-form>

    <!-- <div class="channelAddcon">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedchannel" @change="handleCheckedchannelChange">
        <el-checkbox v-for="item in channelList" :label="item.channelName" :key="item.id" border size='mini' style="margin-bottom: 10px;">{{item.channelName}}</el-checkbox>
      </el-checkbox-group>
    </div> -->
    <div class="channelAddcon">
      <el-table :data="channelList" border style="width: 100%">
        <el-table-column prop="id" label="渠道ID">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="operator" label="创建人">
        </el-table-column>
        <el-table-column prop="channelName" label="渠道名称">
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="channelAdd.page" :limit.sync="channelAdd.size" layout="sizes,prev, pager, next,total"
        @pagination="getchannalList" />

    </div>
    <el-dialog title="新增渠道" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item label="渠道名称" prop="coninfo">
          <el-input v-model.trim="ruleForm.coninfo" clearable autocomplete="off" type="textarea" size="small" maxlength="200"
            show-word-limit :autosize="{ minRows: 8, maxRows:10}" @keydown.up.native="this.value=this.value.replace(/\s+/g,'')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAddchannelsumbit(ruleForm,'ruleForm')" size="small">提 交</el-button>
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getOrderChannelList, //渠道
    getOrderChannelTypeList, //渠道类别
    addOrderChannel
  } from "@/api/commodityfiles";
  import Pagination from "@/components/Pagination"; //分页
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        channelAdd: {
          page: 1,
          size: 10,
        },
        total: 2,
        ruleForm: {
          coninfo: ''
        },
        rules: {
          coninfo: [{
            required: true,
            message: '请输入渠道内容',
            trigger: 'blur'
          }],
        },
        formLabelWidth: '120px',
        channelTypeidName: '',
        channelTypellist: [],
        channelTypeidTypes: '',
        // isIndeterminate: true,
        // checkAll: false,
        // checkedCities: [],
        //  checkedchannel: [],
        channelList: [],
        dialogFormVisible: false,
        isflag: false,
      }
    },
    mounted() {
      this.getchannelListType();
      setTimeout(() => {
        this.getchannalList();
      }, 1.5 * 1000);

    },
    methods: {
      getchannelListType() { //  渠道类别
        getOrderChannelTypeList().then(res => {
          this.channelTypellist = res.data.data;
          this.channelTypeidName = res.data.data[0].channelName;
          this.channelTypeidIds = res.data.data[0].id;
        })

      },
      getchannalList() {
        const data = {
          parentId: this.channelTypeidIds,
          page: this.channelAdd.page,
          size: this.channelAdd.size
        }
        getOrderChannelList(data).then(response => {
          this.channelList = response.data.data.rows;
          this.total = response.data.data.total;
          // let Numarr = [];
          // response.data.data.forEach(channel => {
          //   Numarr.push(channel.channelName)
          // })
          // this.checkedCities = Numarr
        });
      },
      handleChannelTypeId(data) {
        if (data) {
          const adddata = {
            parentId: data.value,
            page: this.channelAdd.page,
            size: this.channelAdd.size
          }
          this.channelTypeidIds = data.value;
          this.channelTypeidName = data.label;
          getOrderChannelList(adddata).then(response => {
            this.channelList = response.data.data.rows;
            this.total = response.data.data.total;

          });
        }
      },

      handleAddchannel() {
        this.dialogFormVisible = true
      },
      handleAddchannelsumbit(item, formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var name = JSON.stringify(item.coninfo),
              str = [],
              itemName = [],
              namerep = (name.replace(/\"/g, "")).replace(/，/g, ',');
            str = namerep.split(',')
            console.log('namerep', namerep,typeof(namerep))
            str.forEach((channel, index) => {
              if (channel.length > 12) {
                this.$message({
                  type: "warning",
                  message: '渠道名称为' + channel + ';' + '第' + (index + 1) + '个不得超过12个字符!'
                });
                this.isflag = true;
                return false;
              } else {
                var newArr = [];
                var len = str.length;
                for (var i = 0; i < len; i++) {
                  if (newArr.indexOf(str[i]) == -1) {
                    newArr.push(str[i]);
                    this.isflag = false;
                  } else {
                    this.$message({
                      type: "warning",
                      message: '渠道名称不允许重复也不允许为空'
                    });
                    this.isflag = true;

                    return false;
                  }
                }
                return newArr;
              }

            })
            if (this.isflag == false) {
              const addOrderData = {
                parentId: this.channelTypeidIds,
                channelName: (item.coninfo.replace(/\"/g, "")).replace(/，/g, ','),
                type: 2,
              }
              addOrderChannel(addOrderData).then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: '渠道添加成功'
                  });
                  this.$refs[formName].resetFields();
                  this.dialogFormVisible = false;
                  setTimeout(() => {
                    this.getchannalList();
                  }, 1.5 * 1000);

                } else {
                  this.$message({
                    type: "warning",
                    message: '渠道添加失败'
                  });
                  this.$refs[formName].resetFields();
                }
              })
            }
          } else {
            this.$message({
              type: "warning",
              message: "请填写渠道名称!"
            });
            return false;
          }
        });

      },
    },
  };
</script>

<style scoped lang="scss">
  .channelAdd {
    padding: 20px;

    .el-checkbox.is-bordered+.el-checkbox.is-bordered {
      margin-left: 0 !important;
    }
  }
</style>
